<!doctype html>
<!--
@license
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<html>
<head>
  <meta charset="utf-8">
  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
  <script src="../../../web-component-tester/browser.js"></script>
  <link rel="import" href="../../polymer.html">
</head>
<body>

  <x-scope></x-scope>

  <dom-module id="x-child-scope">
    <style>
      :host {
        display: block;

        --mixin2: {
          border: 3px solid seagreen;
          background: url(http://www.google.com/icon.png);
        };
      }
      
      #mixin1 {
        @apply(--mixin1);
      }

      #mixin2 {
        @apply(--mixin2);
      }

      #mixin3 {
        padding: 3px;
        @apply(--mixin3);
      }

      #mixin4 {
        @apply(--mixin4);
      }
    </style>

    <template>
      <div id="mixin1">mixin1</div>
      <div id="mixin2">mixin2</div>
      <div id="mixin3">mixin3</div>
      <div id="mixin4">mixin4</div>
    </template>
    <script>
    HTMLImports.whenReady(function() {
      Polymer({is: 'x-child-scope'});
    });
    </script>
  </dom-module>

  <dom-module id="x-scope">
    <style>
      :host {
        display: block;
        padding: 8px;

        --mixin1: {
          border: 1px solid black;
        };

        --b: 2px solid orange;

        --m1: 1px;
        --m2: 2px;

        --c1: 5px;
        --c2: 10px;

        --mixin2: {
          border: var(--b);
        };

        --mixin3: {
          @apply(--mixin2);
        };

        --mixin4: {
          padding: 2px;
          @apply(--mixin3);
          margin: var(--m2);
        };

        --mixin5: {
          border: calc(var(--c1) + var(--c2)) solid orange;
        };
      }

      #mixin1 {
        @apply(--mixin1);
      }

      #mixin2 {
        @apply(--mixin2);
      }

      #mixin3 {
        padding: 1px;
        margin: var(--m1);
        @apply(--mixin3);
      }

      #mixin4 {
        @apply(--mixin4);
      }

      #mixin5 {
        @apply(--mixin5);
      }

      x-child-scope {
        padding: 10px;
      }

    </style>

    <template>
      <div id="mixin1">mixin1</div>
      <div id="mixin2">mixin2</div>
      <div id="mixin3">mixin3</div>
      <div id="mixin4">mixin4</div>
      <div id="mixin5">mixin5</div>
      <hr>
      <x-child-scope id="child"></x-child-scope>
    </template>
    <script>
    HTMLImports.whenReady(function() {
      Polymer({is: 'x-scope'});
    });
    </script>
  </dom-module>


<script>
suite('scoped-styling-apply', function() {

  function assertComputed(element, value, property) {
    var computed = getComputedStyle(element);
    property = property || 'border-top-width';
    assert.equal(computed[property], value, 'computed style incorrect for ' + property);
  }

  var styled = document.querySelector('x-scope');

  test('variable mixins calculated correctly and inherit', function() {
     var e = styled;
     assert.property(e._styleProperties, '--mixin1');
     assert.property(e._styleProperties, '--mixin2');
     assert.property(e._styleProperties, '--mixin3');
     assert.property(e._styleProperties, '--mixin4');
     e = styled.$.child;
     assert.property(e._styleProperties, '--mixin1');
     assert.property(e._styleProperties, '--mixin2');
     assert.property(e._styleProperties, '--mixin3');
     assert.property(e._styleProperties, '--mixin4');
  });

  test('variable mixins apply', function() {
    assertComputed(styled.$.mixin1, '1px');
    assertComputed(styled.$.mixin2, '2px');
    assertComputed(styled.$.mixin3, '2px');
    assertComputed(styled.$.mixin3, '1px', 'padding-top');
    assertComputed(styled.$.mixin3, '1px', 'margin-top');
    assertComputed(styled.$.mixin4, '2px');
    assertComputed(styled.$.mixin4, '2px', 'padding-top');
    assertComputed(styled.$.mixin4, '2px', 'margin-top');
  });

  test('mixins apply with url values', function() {
    var url = 'http://www.google.com/icon.png';
    var e = styled.$.child;
    assert.include(e._styleProperties['--mixin2'], url);
    assert.include(e._customStyle.textContent, url);
  });

  test('variable mixins inherit and override', function() {
    var e = styled.$.child;
    assertComputed(e.$.mixin1, '1px');
    assertComputed(e.$.mixin2, '3px');
    assertComputed(e.$.mixin3, '2px');
    assertComputed(e.$.mixin3, '3px', 'padding-top');
    assertComputed(e.$.mixin4, '2px');
    assertComputed(e.$.mixin4, '2px', 'padding-top');
    assertComputed(e.$.mixin4, '2px', 'margin-top');
  });

  test('calc can be used in mixins', function() {
    assertComputed(styled.$.mixin5, '15px');
  });
});

</script>
</body>
</html>
